import { Component, Prop } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import { BaoshiPlanNumPopView } from './BaoshiPlanNumPop'
import type { AddType, PageDto } from '@/api/types'
import type { AnyObject } from '@/types'
import { deletePlanNumber, getInsureCompanyPlanList, getInsureCompanyPlanNumberList } from '@/api/insureCompanyPlan'
import type { InsureCompanyDetailDto } from '@/api/insCompany/types'
import type { InsureCompanyPlanDetailDto, InsureCompanyPlanNumberDto } from '@/api/insureCompanyPlan/types'
import { message } from 'ant-design-vue'
import DialogEditPlanNumber from './DialogEditPlanNumber'

@Component
export class BaoshiPlanView extends TableRender {
    @Prop() detailData!: InsureCompanyDetailDto

    addType = 'edit' as AddType

    curData = {} as InsureCompanyPlanNumberDto

    noFilterPadding = true
    noTablePadding = true
    isPopShow = false
    showDialog = false
    filterConfig() { 
        return {
            name: {
                name: '筛选月份：',
                element: 'datetime',
                placeholder: '请选择',
                type:'month'
            },
        }
    }
	
    tableColumnConfigOld = () => [
        {
            field: 'effectTime',
            title: '生效月份',
            // formatter: ({row}) => {
            //     return row.feeStartTime ? dayjs(row.feeStartTime).format('YYYY-MM') : ''
            // }
        },
        {
            field: 'companyPlanName',
            title: '保司方案',
        },
        {
            field: 'status',
            title: '状态',
        },
        {
            field: 'insureNumbers',
            title: '保单号',
        },
        {
            field: 'companyName',
            title: '操作',
            params: {
                buttons: [
                    {
                        text: '编辑',
                        event: (row) => {
                            this.onEdit(row)
                        }
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        event: (row) => {
                            this.onRemove(row)
                        }
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<InsureCompanyPlanNumberDto>

    onEdit(row: InsureCompanyPlanNumberDto) {
        this.addType = 'edit'
        this.curData = row
        this.showDialog = true
    }
    async onRemove(row: InsureCompanyPlanNumberDto) {
        await deletePlanNumber({
            id: row.id as number
        })
        message.success('删除成功')
        this.reloadPage()
    }

    onLoadData(pageNum: number, pageSize: number, filters: AnyObject) {
        return getInsureCompanyPlanNumberList({
            insureCompanyId: this.detailData.id,
            pageNum: pageNum,
            pageSize: pageSize,
            ...filters
        })
    }

    render() { 
        return (
            <div class="h-full flex flex-col">
                <div class="flex-none">
                    <div class="flex-1 flex">
                        <div class="flex-1">{this.renderFilter()}</div>
                        <div onClick={() => { 
                            this.isPopShow = true
                            console.log('点击了')
                        }}>测试按钮</div>
                    </div>
                </div>
                <div class="flex-1">
                    {this.renderTable()}
                </div>
                <div class="flex-none">
                    {this.renderPager()}
                </div>
                <BaoshiPlanNumPopView
                    v-model:show={this.isPopShow}
                />
                <DialogEditPlanNumber v-model:show={this.showDialog} addType={this.addType} detailData={this.curData} insureCompanyId={this.detailData.id} onRefresh={this.reloadPage} />
            </div>
        )
    }
}

export default toNative<{detailData: InsureCompanyDetailDto}, {}>(BaoshiPlanView)